const path = require("path");
const webpack = require("webpack");
const { merge } = require("webpack-merge");
const webpackConfigBase = require("./webpack.base");
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin"); // 更友好的提示插件
const portfinder = require("portfinder"); // 获取一个可用的 port 的插件
const webpackConfigDev = {
    mode: "development",
    devtool: "cheap-module-eval-source-map",
    module: {
        rules: []
    },
    //插件
    plugins: [
        // 更新组件时在控制台输出组件的路径而不是数字ID，用在开发模式,当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
        new webpack.NamedModulesPlugin(),
        //热更新
        new webpack.HotModuleReplacementPlugin()
    ],
    //配置webpack开发服务功能
    devServer: {
        //设置基本目录结构
        contentBase: path.resolve(__dirname, "../dist"),
        //服务器ip地址，也可以使用localhost
        host: "localhost",
        //服务端压缩是否开启
        compress: true,
        //实时刷新
        inline: true,
        //开启热更新
        hot: true,
        //自动打开浏览器
        open: true,
        //配置服务端口号
        port: 8001,
        //noInfo: true,
        quiet: true,
        stats: {
            // 添加 children 信息
            children: false,
            // 添加构建日期和构建时间信息
            builtAt: true,
            // 添加构建模块信息
            modules: false,
            hash: false
        },
        //当有编译错误或者警告的时候显示一个全屏overlay
        overlay: true,
        //devtool控制台显示信息
        clientLogLevel: "none", //none, info, (warning,error 一直有）
        historyApiFallback: true,
        //代理
        proxy: {
            "/": {
                target: "https://api-m.mtime.cn",
                changeOrigin: true,
                secure: true, //https处理
                pathRewrite: { "^/": "" }
            }
        }
    }
};
const webpackConfigDevServer = merge(
    webpackConfigBase,
    webpackConfigDev
);
module.exports = new Promise((resolve, reject) => {
    // 设置插件的初始搜寻端口号
    portfinder.basePort = webpackConfigDevServer.devServer.port;
    portfinder.getPort((err, port) => {
        if (err) reject(err);
        else {
            // 这里就已经得到了可以使用的端口号了
            webpackConfigDevServer.devServer.port = port;
            webpackConfigDevServer.plugins.push(
                new FriendlyErrorsPlugin({
                    // 清除控制台原有的信息
                    clearConsole: true,
                    // 打包成功之后在控制台给予开发者的提示
                    compilationSuccessInfo: {
                        messages: [
                            `开发环境启动成功，项目运行在: http://${webpackConfigDevServer.devServer.host}:${port}`
                        ]
                    },
                    // 打包发生错误的时候
                    onErrors: () => {
                        console.log("打包失败");
                    }
                })
            );
            resolve(webpackConfigDevServer);
        }
    });
});
